<?php
// 这里可以进行一些游戏数据的初始化，例如飞机的初始位置等
// 不过在这个简单示例中暂未用到复杂的 PHP 逻辑
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版飞机大战游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
        }

        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            margin: 50px auto;
            border: 1px solid #fff;
            background-image: url('1.png');
        }

        .player-plane {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('2.png');
            bottom: 10px;
            left: 175px;
        }

        .enemy-plane {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('3.png');
        }

        .bullet {
            position: absolute;
            width: 5px;
            height: 10px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="game-container">
        <div class="player-plane" id="player"></div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const player = document.getElementById('player');
        let playerX = 175;
        const playerSpeed = 5;
        const bulletSpeed = 10;
        const enemySpeed = 3;
        let bullets = [];
        let enemies = [];

        // 监听键盘事件控制飞机移动
        document.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowLeft':
                    if (playerX > 0) {
                        playerX -= playerSpeed;
                        player.style.left = playerX + 'px';
                    }
                    break;
                case 'ArrowRight':
                    if (playerX < gameContainer.offsetWidth - player.offsetWidth) {
                        playerX += playerSpeed;
                        player.style.left = playerX + 'px';
                    }
                    break;
                case ' ':
                    // 发射子弹
                    const bullet = document.createElement('div');
                    bullet.classList.add('bullet');
                    bullet.style.left = playerX + player.offsetWidth / 2 - bullet.offsetWidth / 2 + 'px';
                    bullet.style.bottom = player.offsetTop + player.offsetHeight + 'px';
                    gameContainer.appendChild(bullet);
                    bullets.push(bullet);
                    break;
            }
        });

        // 移动子弹
        function moveBullets() {
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                const newY = parseInt(bullet.style.bottom) + bulletSpeed;
                bullet.style.bottom = newY + 'px';

                // 移除超出屏幕的子弹
                if (newY > gameContainer.offsetHeight) {
                    gameContainer.removeChild(bullet);
                    bullets.splice(i, 1);
                    i--;
                }
            }
        }

        // 生成敌机
        function generateEnemies() {
            if (Math.random() < 0.02) {
                const enemy = document.createElement('div');
                enemy.classList.add('enemy-plane');
                const enemyX = Math.random() * (gameContainer.offsetWidth - enemy.offsetWidth);
                enemy.style.left = enemyX + 'px';
                enemy.style.top = '0px';
                gameContainer.appendChild(enemy);
                enemies.push(enemy);
            }
        }

        // 移动敌机
        function moveEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                const newY = parseInt(enemy.style.top) + enemySpeed;
                enemy.style.top = newY + 'px';

                // 移除超出屏幕的敌机
                if (newY > gameContainer.offsetHeight) {
                    gameContainer.removeChild(enemy);
                    enemies.splice(i, 1);
                    i--;
                }
            }
        }

        // 碰撞检测
        function checkCollisions() {
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                for (let j = 0; j < enemies.length; j++) {
                    const enemy = enemies[j];
                    const bulletRect = bullet.getBoundingClientRect();
                    const enemyRect = enemy.getBoundingClientRect();

                    if (
                        bulletRect.left < enemyRect.right &&
                        bulletRect.right > enemyRect.left &&
                        bulletRect.top < enemyRect.bottom &&
                        bulletRect.bottom > enemyRect.top
                    ) {
                        // 子弹击中敌机
                        gameContainer.removeChild(bullet);
                        bullets.splice(i, 1);
                        i--;
                        gameContainer.removeChild(enemy);
                        enemies.splice(j, 1);
                        j--;
                    }
                }
            }
        }

        // 游戏主循环
        function gameLoop() {
            moveBullets();
            generateEnemies();
            moveEnemies();
            checkCollisions();
            requestAnimationFrame(gameLoop);
        }

        gameLoop();
    </script>
</body>

</html>